<template>
 <div class='newsinfo-conrainer'>
  <h3 class='title'>{{ newsinfo.title + id}}</h3>
  <p class='info'>
   <span>发表时间：{{ newsinfo.time }}</span>
   <span>点击：{{ id }}次</span>
  </p>
  <hr>
  <!-- 新闻内容 -->
  <div class="content" v-html='newsinfo.conent'></div>

  <!-- 评论子组件 -->
  <!-- 父组件通过子组件传值，通过属性绑定的形式 -->
  <comment :newsid="id"></comment>

 </div>
</template>

<script>
// 导入 Comment.vue 子组件
import comment from '../sub-conponents/Comment.vue'

export default {
  data(){
    return {
      newsinfo:{
        title: '页面：',
        add_time: '',
        conent: `<div>
         <h4>新闻内容----------</h4>
        </div>`,
        time: '2020-20-20'
      } //新闻详情
    }
  },
  methods: {
    // 根据id获取新闻的详情
    async getNewsInfo(){
      const { data } = await this.$http.get('/api/getnew/:newid' + this.id)
      if(data.status === 0) return (this.newsinfo = data.message[0])
    }
  },
  created(){
    this.getNewsInfo()
  },
  props:['id'],
  components: {
    // 为当前的 NewsInfo.vue 组件注册私有的子组件
    comment
  }
}
</script>

<style lang="scss" scoped>
  .newsinfo-conrainer{
    padding: 3px;
    .title{
      font-size: 15px;
      text-align: center;
      color: red;
      margin: 15px 0;
    }

    .info{
      color: #26A2ff;
      display: flex;
      justify-content: space-between;
    }
  }
</style>